<template>
  <div>
    <el-upload
      ref="upload"
      class="importPrice"
      action="/api/cms_claimfac/rpQaUrgentDtl/importExcel"
      accept=".xlsx, .xls"
      :limit="1"
      :headers="headersObj"
      :on-success="showErrorList"
      :on-exceed="handleExceed"
    >
      <div style="text-align: left;">
        <multiuse-button size="small" type="primary" plain>点击上传</multiuse-button>
        <div style="marginbottom: 5px;padding-top: 1rem;">
          <p>
            点击“
            <span style="color: red">选择</span>”按钮，选择要导入的xls文件。
          </p>
        </div>
      </div>
    </el-upload>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="错误信息" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      :columns="columns"
      :dataSource="dataList"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :isPagination="false"
      :isSelectColumn="false"
      height="auto"
      :is-select-column="false"
    >
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right',
      }"
    >
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
  import { getToken, getAppId, getUserId } from '@/assets/js/auth';
  import { downloadModel } from '@/api/claim/factory/CheckSheetMaintain';
  import { exportExcelFile } from '@/utils';
  export default {
    // 获取审批单ID
    data() {
      return {
        headersObj: {
          jwt: getToken(),
          appId: getAppId(),
          userId: getUserId(),
          userAgent: 'pc',
        },
        errorList: [],
        exportLoading: false,
        columns: this.creatHeader(),
        dataList: [],
        type: false
      };
    },
    methods: {
      downloadTemplate() {
        this.$confirm('此操作将下载excel模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.exportLoading = true;
          downloadModel().then((res) => {
            console.log(res);
            exportExcelFile(res.data, '考核单导入模板');
            this.exportLoading = false;
          });
        });
      },
      showErrorList(response, file, fileList) {
          this.dataList = response.data;
          if(response.success==true){
            this.type = true;
            this.$notify.success({ title: '提示信息', message: '导入完成!' });
            this.closeDialog();
          } else {
            this.$notify.warning({ title: '提示信息', message: '导入失败,错误信息如下!' });
          }
      },
      closeDialog() {
        console.log(this.type);
        if(this.type){
          this.$emit('importclose',this.dataList);
        }else{
          this.$emit('close');
        }
      },
      handleExceed(files, fileList) {
        this.$message(`只能选择一个文件`);
      },
      //table表头和数据源
      creatHeader() {
        return [
          { title: '错误行数', dataIndex: 'row', sorter: true },
          { title: '错误信息', dataIndex: 'errorMsg', sorter: true },
        ];
      },
    },
  };
</script>
<style lang="less" scoped></style>>
